<script lang="ts" setup>
import type { RouteRecordRaw } from 'vue-router'

const router = useRouter()

const { routerData } = defineProps({
  routerData: {
    type: Array<RouteRecordRaw>,
    required: true
  }
})
</script>

<template>
  <el-container v-for="(item, index) in routerData" :key="index" class="h-full max-w-fit">
    <template v-if="item.children && item.children.length > 0">
      <el-dropdown class="use-font-theme">
        <a
          :href="item.meta?.isFrame ? item.path : 'javascript:'"
          class="dropdown flex items-center gap-1 one-level-link use-hover-color use-transitions-colors-short"
          target="_blank"
          @click="item.components ? router.push({ name: item.meta?.name?.toString() }) : ''"
        >
          <SvgIcon :message="item.meta?.title?.toString()" :name="item.meta?.icon?.toString()" />
          <SvgIcon name="downward" />
        </a>
        <template #dropdown>
          <el-container
            class="py-1.5 use-radius-sm use-transitions-shadow-short"
            direction="vertical"
          >
            <a
              v-for="(child, i) in item.children"
              :key="i"
              :href="child.meta?.isFrame ? child.path : 'javascript:'"
              class="min-w-48 use-hover-color use-transitions hover:translate-x-5"
              target="_blank"
              @click="child.components ? router.push({ name: child.meta?.name?.toString() }) : ''"
            >
              <SvgIcon
                :message="child.meta?.title?.toString()"
                :name="child.meta?.icon?.toString()"
                parentClass="py-1.5 px-6 min-w-36 justify-center"
              />
            </a>
          </el-container>
        </template>
      </el-dropdown>
    </template>
    <template v-else>
      <a
        :href="item.meta?.isFrame ? item.path : 'javascript:'"
        class="one-level-link flex items-center use-hover-color use-transitions-colors-short relative"
        target="_blank"
        @click="item.components ? router.push({ name: item.meta?.name?.toString() }) : ''"
      >
        <SvgIcon :message="item.meta?.title?.toString()" :name="item.meta?.icon?.toString()" />
      </a>
    </template>
  </el-container>
</template>

<style lang="scss" scoped>
.one-level-link {
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0.45rem;
    border-radius: 1px;
    background-color: rgba(255, 165, 0, 0.9) !important;
    transition: all 0.5s;
  }

  &:hover {
    &::before {
      width: 100%;
    }
  }
}
</style>
